<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品展示表</title>
<link rel="stylesheet" type="text/css"
	href="../admin/layui/css/layui.css" />
<script src="../admin/layui/layui.js" type="text/javascript"
	charset="utf-8"></script>
</head>
<body>
	<!-- 搜索的表单 -->
	<form class="layui-form" action="">
		<div class="layui-form-item">
			<div class="layui-inline">
			<label class="layui-form-label">商品名</label>
				<div class="layui-input-inline" style="width: 80px;">
					<input type="text" name="proName" autocomplete="off"
						class="layui-input">
				</div>
				<label class="layui-form-label">价格</label>
				<div class="layui-input-inline" style="width: 80px;">
					<input type="text" name="minOriginalPrice" placeholder=""
						autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid">--</div>
				<div class="layui-input-inline" style="width: 80px;">
					<input type="text" name="maxOriginalPrice" placeholder=""
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">类型名称</label>
				<div class="layui-input-inline" style="width: 90px;">
					<select name="typeId" class="typeId">
						<option value=""></option>
					</select>
				</div>
				<label class="layui-form-label">推荐位置</label>
			<div class="layui-input-inline" style="width: 90px;">
				<select name="posiId" class="posiId">
					<option value=""></option>
				</select>
			</div>
			</div>
			<div class="layui-inline">
				<button class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<!-- 搜索结束-->

	<!--添加的按钮  -->

	<input type="button" class="layui-btn" id="addBtn" value="添加" />
	<input type="button" class="layui-btn layui-btn-danger" id="delete"
		lay-event="delete" value="批量删除" />

	<!-- 添加表单的弹窗 -->
	<form class="layui-form" id="addForm" style="display: none">
		<div class="layui-form-item">
			<label class="layui-form-label">商品名</label>
			<div class="layui-input-inline">
				<input type="text" name="proName" required lay-verify="required"
					autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-label">商品编号</label>
			<div class="layui-input-inline">
				<input type="text" name="bianHao" required lay-verify="required"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">图片地址</label>
			<div class="layui-input-inline">
				<input type="file" name="pictureFile" id="pictureFileAdd"
					placeholder="请选择" autocomplete="off" class="layui-input"> <input
					type="text" name="proUrl" id="imgUrlAdd">
				<!-- 隐藏域，为了提交时存图片的地址 -->
				<img src="" id="imgShowAdd" />
				<!-- 图片展示 -->
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">推荐位置</label>
			<div class="layui-input-inline" style="width: 100px;">
				<select name="posiId" class="posiId">
					<option value=""></option>
				</select>
			</div>
			<label class="layui-form-label">类型名称</label>
			<div class="layui-input-inline" style="width: 100px;">
				<select name="typeId" class="typeId">
					<option value=""></option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">定制</label>
			<div class="layui-input-inline" style="width: 100px;">
				<select name="dingZhi" lay-verify="required">
					<option value="">--请选择--</option>
					<option value="是">是</option>
					<option value="否">否</option>
				</select>
			</div>
			<label class="layui-form-label">生产地址</label>
			<div class="layui-input-inline">
				<input type="text" name="address" required lay-verify="required"
					placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">上架状态</label>
			<div class="layui-input-inline" style="width: 100px;">
				<select name="state" lay-verify="required">
					<option value="0">--请选择--</option>
					<option value="上架">上架</option>
					<option value="下架">下架</option>
				</select>
			</div>
			<label class="layui-form-label">产品介绍</label>
			<div class="layui-input-inline">
				<input type="text" name="introduce" required lay-verify="required"
					placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">库存</label>
			<div class="layui-input-inline">
				<input type="text" name="inventory" required placeholder="请输入标题"
					lay-verify="number" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-label">材质</label>
			<div class="layui-input-inline">
				<input type="text" name="material" required lay-verify="required"
					placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">原价格</label>
			<div class="layui-input-inline">
				<input type="text" name="originalPrice" required placeholder="请输入标题"
					autocomplete="off" class="layui-input" lay-verify="number">
			</div>
			<label class="layui-form-label">现价格</label>
			<div class="layui-input-inline">
				<input type="text" name="currentPrice" required
					lay-verify="required" placeholder="请输入标题" autocomplete="off"
					class="layui-input" lay-verify="number">
			</div>
		</div>
		<div class="layui-form-item">
			<!-- <label class="layui-form-label">是否在首页展示</label>
			<div class="layui-input-inline">
				<input type="text" name="isShow" required placeholder="请输入标题"
					autocomplete="off" class="layui-input">
			</div> -->
			<label class="layui-form-label">品牌</label>
			<div class="layui-input-inline">
				<input type="text" name="brand" required lay-verify="required"
					placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="addformDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<!-- 添加的表单结束 -->


	<!--修改表单的弹窗 -->
	<form class="layui-form" action="" style="display: none"
		id="updateForm" lay-filter="updateForm">
		<div class="layui-form-item">
			<label class="layui-form-label">id</label>
			<div class="layui-input-block">
				<input type="text" name="proId" required lay-verify="required"
					autocomplete="off" class="layui-input" layui-disabled disabled>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品编号</label>
			<div class="layui-input-inline">
				<input type="text" name="bianHao" required lay-verify="required"
					autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-label">商品名</label>
			<div class="layui-input-inline">
				<input type="text" name="proName" required lay-verify="required"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">图片地址</label>
			<div class="layui-input-inline">
				<input type="file" name="pictureFile" id="pictureFileUpdate"
					placeholder="请选择" autocomplete="off" class="layui-input"> <input
					type="text" name="proUrl" id="imgUrlUpdate">
				<!-- 隐藏域，为了提交时存图片的地址 -->
				<img src="" id="imgShowUpdate" />
				<!-- 图片展示 -->
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">推荐位置</label>
			<div class="layui-input-inline" style="width: 100px;">
				<select name="posiId" class="posiId">
					<option value=""></option>
				</select>
			</div>
			<label class="layui-form-label">类型名称</label>
			<div class="layui-input-inline" style="width: 100px;">
				<select name="typeId" class="typeId">
					<option value=""></option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">定制</label>
			<div class="layui-input-inline" style="width: 100px;">
				<select name="dingZhi" lay-verify="required">
					<option value="">--请选择--</option>
					<option value="是">是</option>
					<option value="否">否</option>
				</select>
			</div>
			<label class="layui-form-label">生产地址</label>
			<div class="layui-input-inline">
				<input type="text" name="address" required lay-verify="required"
					placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">上架状态</label>
			<div class="layui-input-inline" style="width: 100px;">
				<select name="state" lay-verify="required">
					<option value="">--请选择--</option>
					<option value="上架">上架</option>
					<option value="下架">下架</option>
				</select>
			</div>
			<label class="layui-form-label">产品介绍</label>
			<div class="layui-input-inline">
				<input type="text" name="introduce" required lay-verify="required"
					placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">库存</label>
			<div class="layui-input-inline">
				<input type="text" name="inventory" required placeholder="请输入标题"
					lay-verify="number" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-label">材质</label>
			<div class="layui-input-inline">
				<input type="text" name="material" required lay-verify="required"
					placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">原价格</label>
			<div class="layui-input-inline">
				<input type="text" name="originalPrice" required placeholder="请输入标题"
					autocomplete="off" class="layui-input" lay-verify="number">
			</div>
			<label class="layui-form-label">现价格</label>
			<div class="layui-input-inline">
				<input type="text" name="currentPrice" required
					lay-verify="required" placeholder="请输入标题" autocomplete="off"
					class="layui-input" lay-verify="number">
			</div>
		</div>
		<div class="layui-form-item">
			<!-- <label class="layui-form-label">是否在首页展示</label>
			<div class="layui-input-inline">
				<input type="text" name="isShow" required placeholder="请输入标题"
					autocomplete="off" class="layui-input">
			</div> -->
			<label class="layui-form-label">品牌</label>
			<div class="layui-input-inline">
				<input type="text" name="brand" required lay-verify="required"
					placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="updateformDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<!-- 修改的表单结束 -->
	<!-- 详情图片表单开始 -->
	<!--添加表单  -->
	<form class="layui-form" action="" style="display: none" id="addFormTu"
		lay-filter="addTuForm">
		<div class="layui-form-item">
			<label class="layui-form-label">图片地址</label>
			<div class="layui-input-inline">
				<input type="file" name="pictureFile" id="imgAdd" placeholder="请选择"
					autocomplete="off" class="layui-input"> <input type="text"
					name="pUrl" id="urlAdd">
				<!-- 隐藏域，为了提交时存图片的地址 -->
				<img src="" id="showAdd" />
				<!-- 图片展示 -->
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">proId</label>
			<div class="layui-input-inline">
				<input type="text" name="proId" required lay-verify="number"
					placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="addformDemoTu">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<!--修改表单  -->
	<form class="layui-form" action="" style="display: none"
		id="updateFormTu" lay-filter="updateFormTu">
		<div class="layui-form-item">
			<label class="layui-form-label">图片id</label>
			<div class="layui-input-inline">
				<input type="text" name="pid" required lay-verify="required"
					placeholder="请输入密码" disabled="disabled" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">图片</label>
			<div class="layui-input-inline">
				<input type="file" name="pictureFile" id="imgUpdate"
					placeholder="请选择" autocomplete="off" class="layui-input"> <input
					type="text" name="pUrl" id="urlUpdate">
				<!-- 隐藏域，为了提交时存图片的地址 -->
				<img src="" id="showUpdate" />
				<!-- 图片展示 -->
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">proId</label>
			<div class="layui-input-inline">
				<input type="text" name="proId" required lay-verify="number"
					placeholder="请输入标题" autocomplete="off" disabled="disabled" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="updateformDemoTu">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<!--详情表单结束  -->
	<!-- 工具条的模板： -->
	<script type="text/html" id="barDemo">
  	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-bg-orange layui-btn-xs" lay-event="tu">详情图片</a>
	</script>
	<script type="text/html" id="barDemo2">
  <a class="layui-btn layui-btn-mini" lay-event="editTu">编辑</a>
 <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="delTu">删除</a>
</script>

	<div id="tuDiv" style="display: none">
		<!-- 头部工具栏开始 -->
		<script type="text/html" id="toolbarDemo1">
         <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add"> <i class="layui-icon">&#xe654;</i>添加</button>
         </div>
     </script>
		<table id="demo2" lay-filter="tutab"></table>
	</div>
	<table id="demo" lay-filter="test"></table>

	<script>
		layui.use([ 'table', 'form', 'layer', 'upload' ], function() {
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
			var $ = layui.$;
			var upload = layui.upload;

			//异步请求商品类型下拉列表
			$.post("getProTyp", function(res) {
				//console.log(res);
				for (var i = 0; i < res.length; i++) {
					$(".typeId").append('<option value="'+res[i].proTypeId+'">' + res[i].proTypeName + '</option>');
				}
				form.render('select');
			}, "json");
			//异步请求商品类型下拉列表
			$.post("getPosition", function(res) {
				//console.log(res);
				for (var i = 0; i < res.length; i++) {
					$(".posiId").append('<option value="'+res[i].posiId+'">' + res[i].posiName + '</option>');
				}
				form.render('select');
			}, "json");

			//第一个实例
			table.render({
				elem : '#demo',
				id : "idTest",
				url : 'getUsers', //数据接口
				page : true, //开启分页
				cols : [ [ //表头
				{
					checkbox : true
				}, {
					field : 'proId',
					title : 'ID',
					width : 70,
					sort : true,
				}, {
					field : 'proName',
					title : '姓名',
					width : 100
				}, {
					field : 'proUrl',
					title : '图片地址',
					width : 120,
					templet : function(d) {
						return '<img src="showPic/'+d.proUrl+'"/>'
					}
				}, {
					field : 'introduce',
					title : '介绍',
					width : 100
				}, {
					field : 'inventory',
					title : '库存',
					width : 100
				}, {
					field : 'material',
					title : '材质',
					width : 100
				}, {
					field : 'dingZhi',
					title : '定制',
					width : 80
				}, {
					field : 'brand',
					title : '品牌',
					width : 100
				}, {
					field : 'originalPrice',
					title : '原价格',
					width : 100
				}, {
					field : 'currentPrice',
					title : '打折价格',
					width : 100
				}, {
					field : 'bianHao',
					title : '商品编号',
					width : 100
				}, {
					toolbar : '#barDemo',
					title : '操作',
					width : 190
				} ] ]
			});
			//图片上传的代码--添加
			upload.render({
				elem : '#pictureFileAdd', //指定选择文件的容器
				url : 'imgUpload', //服务端的地址
				method : 'post',// 类型
				done : function(res, index, upload) {
					console.log(res);
					if (res.code == 0) {
						var imgUrl = JSON.parse(res.data);
						lujing = imgUrl.src
						$("#imgUrlAdd").val(lujing); //设置隐藏域的值
						//$("#imgShowAdd").attr("src","../"+imgUrl.src); //设置图片展示
						$("#imgShowAdd").attr("src", "showPic/" + lujing); //设置图片展示
					}
				}
			});
			//图片上传的代码--修改
			upload.render({
				elem : '#pictureFileUpdate', //指定选择文件的容器
				url : 'imgUpload', //服务端的地址
				method : 'post',// 类型
				done : function(res, index, upload) {
					console.log(res);
					if (res.code == 0) {
						var imgUrl = JSON.parse(res.data);
						lujing = imgUrl.src
						$("#imgUrlUpdate").val(lujing); //设置隐藏域的值
						//$("#imgShowAdd").attr("src","../"+imgUrl.src); //设置图片展示
						$("#imgShowUpdate").attr("src", "showPic/" + lujing); //设置图片展示
					}
				}
			});

			//监听提交
			form.on('submit(formDemo)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				table.reload('idTest', {
					where : data.field
				//设定异步数据接口的额外参数
				});
				return false;
			});

			//批量删除
			$("#delete").click(function() {
				var checkStatus = table.checkStatus('idTest');//获取选中的数据
				var ids = [];
				for (var i = 0; i < checkStatus.data.length; i++) {
					ids.push(checkStatus.data[i].proId);
				}
				var id = ids.join(",");
				//通过ajax向后台提交删除请求
				$.post("deletePiPro", {
					"ids" : id
				}, function(res) {
					layer.msg(res.msg)
					table.reload('idTest', {})
				}, "json");
			});

			//添加表单的单击事件
			$("#addBtn").click(function() {
				layer.open({
					type : 1,
					content : $('#addForm'),
					area : [ '800px', '600px' ]
				//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
				});
			});

			//监听提交--添加
			form.on('submit(addformDemo)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				//向服务端发送请求
				$.post("addPro", data.field, function(res) {
					if (res.code == "0") {
						layer.msg("成功", {
							time : 2000
						//成功提示弹出时间
						}, function() {
							layer.closeAll();//关闭所有的弹窗
							table.reload('idTest', {})//表格重载
						});
					}
				}, "json");
				return false;
			});//监听提交----添加 结束
			//监听提交---修改
			form.on('submit(updateformDemo)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				//向服务端发送请求
				$.post("updatePro", data.field, function(res) {
					if (res.code == "0") {
						layer.msg("成功", {
							time : 3000
						//成功提示弹出时间
						}, function() {
							layer.closeAll();//关闭所有的弹窗
							table.reload('idTest', {})//表格重载
						});
					}
				}, "json");
				return false;
			});//监听提交----修改 结束

			//监听工具条 
			table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

				if (layEvent === 'detail') { //查看
					//do somehing
				} else if (layEvent === 'del') { //删除
					layer.confirm('真的删除行么', function(index) {
						//向服务端发送删除指令
						$.post("deletePro", {
							proId : data.proId
						}, function(res) {
							if (res.code == "0") {
								layer.msg("成功", {
									time : 2000
								//成功提示弹出时间
								}, function() {
									obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
									layer.close(index);
									layer.closeAll();//关闭所有的弹窗
									table.reload('idTest', {})//表格重载
								});
							} else {
								layer.msg("底下有商品，不能进行删除", {
									time : 2000
								//成功提示弹出时间
								}, function() {
									layer.closeAll();//关闭所有的弹窗
								});
							}
						}, "json");
					});
				} else if (layEvent === 'edit') { //编辑
					//1.弹窗
					layer.open({
						type : 1,
						content : $('#updateForm'),
						area : [ '800px', '600px' ]
					});
					form.val("updateForm", data);
					$("#imgShowUpdate").attr("src", "showPic/" + data.proUrl); //设置图片展示
					//同步更新缓存对应的值
					obj.update({
						username : '123',
						title : 'xxx'
					});
				} else if (layEvent === 'tu') { //编辑
					//layer.msg('编辑');
					$("#imgUrlAdd").val(data.proId);
					$("#imgUrlUpdate").val(data.proId);

					//do something

					layer.open({
						type : 1,
						content : $('#tuDiv'),
						area : [ '800px', '500px' ]
					//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});

					table.render({
						elem : '#demo2',
						url : 'getProIdDetails?proId=' + data.proId,
						toolbar : '#toolbarDemo1',
						id : 'idTest2',
						cols : [ [ //表
						{
							field : 'pid',
							title : 'ID',
							width : 80,
							sort : true,
							fixed : 'left'
						}, {
							field : 'pUrl',
							title : '产品图片',
							width : 180,
							sort : true,
							templet : function(d) {
								return '<img  src="showPic/'+d.pUrl+'" width="50px"/>'
							}
						}, {
							field : 'proId',
							title : '产品Id',
							width : 180
						}, {
							title : '编辑',
							width : 250,
							toolbar : "#barDemo2",
							sort : true
						}

						] ]
					});//表格渲染结束
					//同步更新缓存对应的值
					obj.update({
						username : '123',
						title : 'xxx'
					});
				}
			});
			//图片上传的代码--添加
			upload.render({
				elem : '#imgAdd', //指定选择文件的容器
				url : 'imgUpload', //服务端的地址
				method : 'post',// 类型
				done : function(res, index, upload) {

					if (res.code == 0) {
						var imgUrl = JSON.parse(res.data);
						lujing = imgUrl.src
						$("#urlAdd").val(lujing); //设置隐藏域的值
						//$("#imgShowAdd").attr("src","../"+imgUrl.src); //设置图片展示
						$("#showAdd").attr("src", "showPic/" + lujing); //设置图片展示
					}
				}
			});

			//图片上传的代码--修改
			upload.render({
				elem : '#imgUpdate', //指定选择文件的容器
				url : 'imgUpload', //服务端的地址
				method : 'post',// 类型
				done : function(res, index, upload) {
					if (res.code == 0) {
						var imgUrl = JSON.parse(res.data);
						lujing = imgUrl.src
						$("#urlUpdate").val(lujing); //设置隐藏域的值
						//$("#imgShowAdd").attr("src","../"+imgUrl.src); //设置图片展示
						$("#showUpdate").attr("src", "showPic/" + lujing); //设置图片展示
					}
				}
			});
			//图片行内工具栏
			table.on('tool(tutab)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				if (layEvent === 'detail') { //查看
					//do somehing
				} else if (layEvent === 'delTu') { //删除
					layer.confirm('真的删除行么', function(index) {
						obj.del();
						layer.close(index);
						$.post("delProUrl", {
							imageId : data.imageId
						}, function(res) {
							if (res.code == 0) {
								"成功", {
									time : 2000
								}, function() {
									layer.closeAll();
									table.reload('idTest', {})
								}
							}
						}, "json")
						//向服务端发送删除指令
					});
				} else if (layEvent === 'editTu') { //编辑
					//do something
					layer.open({
						type : 1,
						content : $('#updateFormTu'),
						area : [ '500px', '600px' ]
					//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});
					form.val("updateFormTu", data);
					$("#showUpdate").attr("src", "showPic/" + data.pUrl); //设置图片展示
					//同步更新缓存对应的值
					obj.update({
						username : '123',
						title : 'xxx'
					});
				}
			});
			//添加弹出
			table.on('toolbar(tutab)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				if (layEvent === 'add') { //查看
					layer.open({
						type : 1,
						content : $('#addFormTu'),
						area : [ '500px', '600px' ]
					//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});
					form.val("addTuForm", data.proId);
				}
			});
			//图片的编辑
			form.on('submit(updateformDemoTu)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				$.post("updateProUrl", data.field, function(res) {
					if (res.code == 0) {
						layer.msg("成功", {
							time : 1000
						}, function() {
							layer.closeAll();
							table.reload('idTest', {});
						})
					}
				}, 'json')
				return false;
			});
			//图片的添加
			//监听添加表单提交
			form.on('submit(addformDemoTu)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				$.post("insertProUrl", data.field, function(res) {
					if (res.code == 0) {
						layer.msg("成功", {
							time : 1000
						}, function() {
							layer.closeAll();
							table.reload('idTest', {});
						})
					}
				}, 'json')
				return false;
			});
		});//结束
	</script>


</body>
</html>